<template>
    <div>

        <div>房间：{{meetingStore.room }}</div>
        <div>{{ meetingStore.id }}，{{ meetingStore.name }}</div>
        <div v-for="msg in msgList">{{ msg }}</div>
        <a-input v-model:value.trim="msgInput" />
        <a-button @click="onSendBtn" type="primary">发送</a-button>
        <div>
            <div v-for="item in memberList" :key="item.id">
                {{ item.id }}, {{ item.name }}
                <a-button @click="call(item)" v-if="item.id != meetingStore.id" type="link">视频</a-button>
            </div>
        </div>
        <VideoList></VideoList>
    </div>
</template>
<script setup lang="ts">
import dayjs from 'dayjs';
import { onMounted, onUnmounted, ref } from 'vue';
import { createWebSocket, eventBus, MessageType, sendMessage, socket, type Message } from './socket';
import { useMeetingStore } from '@/stores/meeting';
import VideoList from './videoList.vue';
const meetingStore = useMeetingStore()
const msgInput = ref('')

const msgList = ref<string[]>([])
const memberList = ref<{id:string, name:string}[]>([])

const onopen = () => {
    getMemberList()

}

const onclose = () => {
    

}

const onmessage = (event: any) => {
    const message: Message = JSON.parse(event.data);
   
    // console.log("room onmessage:")
    // console.log(message)

    

    if(message.messageType == MessageType.ROOM){
        msgList.value.push(`${message.time} ${message.senderName}: ${message.content}`)
    }
    if(message.messageType == MessageType.MEMBER_LIST){
        for(let item of message.content){
            addMember(item)
        }
    }
    if(message.messageType == MessageType.MEMBER_JOIN){
        addMember(message.content)
    }
    if(message.messageType == MessageType.MEMBER_EXIT){
        for(let i = memberList.value.length - 1; i >= 0; i--){
            let member = memberList.value[i]
            if(member.id == message.content){
                memberList.value.splice(i, 1)
            }
        }
    }
}



const onSendBtn = () => {
    sendMessage({
        messageType: MessageType.ROOM,
        senderId: meetingStore.id,
        senderName: meetingStore.name,
        targetId: meetingStore.room,
        content: msgInput.value,
     
    })
    msgInput.value = ""
}

const getMemberList = () => {
    if(!socket){
        return
    }
    sendMessage({
        messageType: MessageType.MEMBER_LIST,
        senderId: meetingStore.id,
        senderName: meetingStore.name,
        targetId: meetingStore.room,
        content: "",
     
    })
}

const addMember = (member: any) => {
    let have = false
    for(let item of memberList.value){
        if(item.id == member.id){
            have = true
        }
    }
    if(!have){
        memberList.value.push(member)
    }
}

const call = (item:any) => {
    eventBus.emit('call', item)
}

onMounted(() => {
    createWebSocket(meetingStore.id)
    eventBus.on("onopen", onopen)
    eventBus.on("onclose", onclose)
    eventBus.on("onmessage", onmessage)
    
    if(socket && socket.readyState == WebSocket.OPEN){
        getMemberList()
    }

})

onUnmounted(() => {
    sendMessage({
        messageType: MessageType.EXIT_ROOM,
        senderId: meetingStore.id,
        senderName: meetingStore.name,
        targetId: meetingStore.room,
        content: "",
    })
    eventBus.off("onopen", onopen)
    eventBus.off("onclose", onclose)
    eventBus.off("onmessage", onmessage)
})
</script>
<style scoped></style>